Using grids
Newspaper and magazine print designers have known this forever: as content on pages is laid out, there is some type of grid pattern used. This should be no different when content is placed on a web page. Using a grid provides balance and provides a level of comfort for the user. If a page is divided into equal sections, more important content can be spread out into more sections on the grid that less important content.A single focal point
In newspaper and magazine design, the focal points are easy to see: the large headlines. The same goes for web pages. There has to be a focal point to capture the “point” of the information on the page. The point is that the user should see that focal point first, so that the nature of the content on the page is clear.Using white space
White space around the elements and the text provides “breathing space” for the user’s eyes, allowing those eyes to focus on images and words. This is one factor that early newsprint was unable to provide, other than space between paragraphs and columns. Once images were added to newspapers and magazines, layout designs provided for more white space, and that was a good thing. Today, web design allows for even more white space, and that enhances the UX.Consistency
It’s all about repetition. This keeps the user comfortable. A grid gives consistency, but more importantly, typeface and content do to. Readers should not have to continually adjust their eyes to different print types. Consistency also means use of words and colors—keeping terminology the same and projecting the same image with color use. Repetition of placement of the same elements can also bring a consistency, if possible. Tight consistency may not always be possible; but good print design is as consistent as possible — especially with typefaces, terminology, and color.Hierarchy
Font size and type are the best means to show the relative importance of different pieces of content. There are two goals here: we want content to be easy to absorb and for the user to know immediately what is contained on the page, and we also want the user’s eyes to travel as we want them to. Thus headlines are large and bold, sometimes in a contrasting color; sub-headlines are smaller and less bold perhaps, but still more important than the smaller text which provides the detail. These things also make a page more scannable. If there is a great deal of print, breaking it up with sub-headings in a large type and bulleted points improves scannability and, consequently, user experience.Using scale
Some elements will be larger than others so that the reader will automatically be drawn to the larger elements in the layout and then move to the smaller elements as they read through the content. This allows the designer to “force” focus on the most important elements and text.Legibility
Legibility means just what it says. Can the reader easily read your text without strain? Is it divided up into chunks with bullet points or other “dividers” so that it is scannable? What is the spacing between words and between letters within those words? If you make that difficult, the reader is not comfortable reading any of your content. Here are some things to consider:- The text should not be too light or too bold.
- Letters need to have good space between them.
- Use ornate and difficult-to-read text very sparingly, and mostly for dramatic effect.
Use of color
When color came to print media, it was huge. Print designers had much greater opportunity to use colors and shades of color to attract the eye and to deliver some psychological messages as well. There is an entire field of the psychological appeal of colors, and good print designers will study this research in making color selections.The takeaway
Decades upon decades ago, print designers were creating layouts for newspapers and magazines. They learned the basic principle of layout grids, of focal points, hierarchy of type, legibility, and, when it became available, color. Those principles still apply today, whether they are utilized in traditional print media or in website design. Featured image, print design image via Shutterstock.Nicole Boyer
Nicole Boyer is graphic and web designer. She is also a contributing blogger for several websites. You can connect with Nicole via Google+ or visit her professional blog.
Read Next
Using AI to Predict Design Trends
Design trends evolve at a blistering pace, especially in web design. On multi-month projects, you might work on a…
By Simon Sterne
15 Best New Fonts, April 2024
Just like web design, type design follows trends. And while there’s always room for an exciting outsider, we tend to…
By Ben Moss
3 Essential Design Trends, May 2024
Integrated navigation elements, interactive typography, and digital overprints are three website design trends making…
How to Write World-Beating Web Content
Writing for the web is different from all other formats. We typically do not read to any real depth on the web; we…
By Louise North
20 Best New Websites, April 2024
Welcome to our sites of the month for April. With some websites, the details make all the difference, while in others,…
Exciting New Tools for Designers, April 2024
Welcome to our April tools collection. There are no practical jokes here, just practical gadgets, services, and apps to…
How Web Designers Can Stay Relevant in the Age of AI
The digital landscape is evolving rapidly. With the advent of AI, every sector is witnessing a revolution, including…
By Louise North
14 Top UX Tools for Designers in 2024
User Experience (UX) is one of the most important fields of design, so it should come as no surprise that there are a…
By Simon Sterne
What Negative Effects Does a Bad Website Design Have On My Business?
Consumer expectations for a responsive, immersive, and visually appealing website experience have never been higher. In…
10+ Best Resources & Tools for Web Designers (2024 update)
Is searching for the best web design tools to suit your needs akin to having a recurring bad dream? Does each…
By WDD Staff
3 Essential Design Trends, April 2024
Ready to jump into some amazing new design ideas for Spring? Our roundup has everything from UX to color trends…
How to Plan Your First Successful Website
Planning a new website can be exciting and — if you’re anything like me — a little daunting. Whether you’re an…
By Simon Sterne